<!-- loginLog.html -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>登录日志管理</title>
    <script src="../../js/vue.js"></script>
    <link type="text/css" rel="stylesheet" href="../../css/index.css">
    <script src="../../js/index.js"></script>
    <script src="../../js/axios.min.js"></script>
    <style>
        .el-table .el-table__fixed-right {
            height: 100% !important;
        }
        .el-row {
            margin-bottom: 15px;
        }
        .status-success {
            color: #67C23A;
        }
        .status-fail {
            color: #F56C6C;
        }
    </style>
</head>
<body>
<div id="app" class="app1">
    <!--布局/搜索功能-->
    <el-row>
        <el-col :span="6">
            <el-input size="mini" v-model="searchForm.userName" placeholder="用户账号"></el-input>
        </el-col>
        <el-col :span="6">
            <el-input size="mini" v-model="searchForm.ipaddr" placeholder="登录IP"></el-input>
        </el-col>
        <el-col :span="6">
            <el-select size="mini" v-model="searchForm.status" placeholder="登录状态" clearable>
                <el-option label="全部" value=""></el-option>
                <el-option label="成功" value="0"></el-option>
                <el-option label="失败" value="1"></el-option>
            </el-select>
        </el-col>
        <el-col :span="6">
            <el-button size="mini" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
            &nbsp;&nbsp;
            <el-button size="mini" type="danger" @click="cleanLogs">清空</el-button>
        </el-col>
    </el-row>

    <!--列表-->
    <el-table :data="tableData" style="width: 100%" height="500" border>
        <el-table-column prop="loginId" label="日志ID" width="100"></el-table-column>
        <el-table-column prop="userName" label="用户账号" width="120"></el-table-column>
        <el-table-column prop="ipaddr" label="登录IP" width="130"></el-table-column>
        <el-table-column prop="loginLocation" label="登录地点" width="120"></el-table-column>
        <el-table-column prop="browser" label="浏览器" width="100"></el-table-column>
        <el-table-column prop="os" label="操作系统" width="100"></el-table-column>
        <el-table-column label="状态" width="80">
            <template slot-scope="scope">
                <el-tag :type="scope.row.status === '0' ? 'success' : 'danger'">
                    {{ scope.row.status === '0' ? '成功' : '失败' }}
                </el-tag>
            </template>
        </el-table-column>
        <el-table-column prop="msg" label="提示信息" width="150" show-overflow-tooltip></el-table-column>
        <el-table-column prop="loginTime" label="登录时间" width="160">
            <template slot-scope="scope">
                {{ formatDateTime(scope.row.loginTime) }}
            </template>
        </el-table-column>
        <el-table-column label="操作" width="150" fixed="right">
            <template slot-scope="scope">
                <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>

    <!--分页-->
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[5, 10, 15, 20, 50]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
    </el-pagination>
</div>

<script>
    new Vue({
        el: '#app',
        data() {
            return {
                tableData: [], // 表格数据
                currentPage: 1, // 当前页码
                pageSize: 10, // 每页显示的条数
                total: 0, // 分页数据的总数
                searchForm: {
                    userName: '',
                    ipaddr: '',
                    status: ''
                } // 搜索条件
            }
        },
        created() {
            this.loadData();
        },
        methods: {
            // 加载登录日志数据
            loadData() {
                let _this = this;
                // 构造请求参数
                let requestData = {
                    pageNo: this.currentPage,
                    pageSize: this.pageSize,
                    data: this.searchForm
                };

                axios.post('/vegetablemarketexpress/loginLog/list', requestData)
                    .then(function (response) {
                        if (response.data.code == 200) {
                            // 根据实际返回的数据结构调整
                            let data = response.data.data;
                            if (data.rows) {
                                _this.tableData = data.rows;
                                _this.total = data.total;
                            } else if (data.list) {
                                _this.tableData = data.list;
                                _this.total = data.total || 0;
                            } else {
                                _this.tableData = [];
                                _this.total = 0;
                            }
                        } else {
                            _this.$message.error('数据加载失败: ' + response.data.msg);
                        }
                    })
                    .catch(function (error) {
                        console.log(error);
                        _this.$message.error('数据加载异常: ' + (error.message || '未知错误'));
                    });
            },

            handleSizeChange(val) {
                this.pageSize = val;
                this.currentPage = 1;
                this.loadData();
            },
            handleCurrentChange(val) {
                this.currentPage = val;
                this.loadData();
            },
            search() {
                this.currentPage = 1;
                this.loadData();
            },
            handleDelete(index, row) {
                this.$confirm('此操作将永久删除该登录日志, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    let _this = this;
                    axios.delete('/vegetablemarketexpress/loginLog/' + row.loginId)
                        .then(function (response) {
                            if (response.data.code == 200) {
                                _this.$message({
                                    message: '删除成功',
                                    type: 'success'
                                });
                                _this.loadData();
                            } else {
                                _this.$message.error('删除失败: ' + response.data.msg);
                            }
                        })
                        .catch(function (error) {
                            console.log(error);
                            _this.$message.error('删除异常: ' + (error.message || '未知错误'));
                        });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            cleanLogs() {
                this.$confirm('此操作将清空所有登录日志, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    let _this = this;
                    axios.delete('/vegetablemarketexpress/loginLog/clean')
                        .then(function (response) {
                            if (response.data.code == 200) {
                                _this.$message({
                                    message: '清空成功',
                                    type: 'success'
                                });
                                _this.loadData();
                            } else {
                                _this.$message.error('清空失败: ' + response.data.msg);
                            }
                        })
                        .catch(function (error) {
                            console.log(error);
                            _this.$message.error('清空异常: ' + (error.message || '未知错误'));
                        });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消清空'
                    });
                });
            },
            // 格式化日期时间
            formatDateTime(dateTime) {
                if (!dateTime) return '';
                // 处理日期格式
                if (typeof dateTime === 'string') {
                    return dateTime.replace('T', ' ').substring(0, 19);
                }
                // 如果是Date对象
                if (dateTime instanceof Date) {
                    return dateTime.getFullYear() + '-' +
                        String(dateTime.getMonth() + 1).padStart(2, '0') + '-' +
                        String(dateTime.getDate()).padStart(2, '0') + ' ' +
                        String(dateTime.getHours()).padStart(2, '0') + ':' +
                        String(dateTime.getMinutes()).padStart(2, '0') + ':' +
                        String(dateTime.getSeconds()).padStart(2, '0');
                }
                return '';
            }
        }
    });
</script>
</body>
</html>
